<!--
 * @Author: maomao
 * @Date: 2021-03-30 20:27:13
 * @Description: 
 * @FilePath: \clientapp\src\components\html-form.vue
-->
<template>
  <div>
    <DxHtmlEditor :height="height">
      <DxMediaResizing :enabled="true" />
      <DxToolbar :multiline="isMultiline">
        <DxItem format-name="undo" />
        <DxItem format-name="redo" />
        <DxItem format-name="separator" />
        <DxItem :format-values="sizeValues" format-name="size" />
        <DxItem :format-values="fontValues" format-name="font" />
        <DxItem format-name="separator" />
        <DxItem format-name="bold" />
        <DxItem format-name="italic" />
        <DxItem format-name="strike" />
        <DxItem format-name="underline" />
        <DxItem format-name="separator" />
        <DxItem format-name="alignLeft" />
        <DxItem format-name="alignCenter" />
        <DxItem format-name="alignRight" />
        <DxItem format-name="alignJustify" />
        <DxItem format-name="separator" />
        <DxItem format-name="orderedList" />
        <DxItem format-name="bulletList" />
        <DxItem format-name="separator" />
        <DxItem :format-values="headerValues" format-name="header" />
        <DxItem format-name="separator" />
        <DxItem format-name="color" />
        <DxItem format-name="background" />
        <DxItem format-name="separator" />
        <DxItem format-name="link" />
        <DxItem format-name="image" />
        <DxItem format-name="separator" />
        <DxItem format-name="clear" />
        <DxItem format-name="codeBlock" />
        <DxItem format-name="blockquote" />
        <DxItem format-name="separator" />
        <DxItem format-name="insertTable" />
        <DxItem format-name="deleteTable" />
        <DxItem format-name="insertRowAbove" />
        <DxItem format-name="insertRowBelow" />
        <DxItem format-name="deleteRow" />
        <DxItem format-name="insertColumnLeft" />
        <DxItem format-name="insertColumnRight" />
        <DxItem format-name="deleteColumn" />
      </DxToolbar>

      <div v-html="markup" />
    </DxHtmlEditor>
  </div>
</template>
<script lang='ts'>
import {
  DxHtmlEditor,
  DxToolbar,
  DxMediaResizing,
  DxItem,
} from "devextreme-vue/html-editor";
import { Options, Vue } from "vue-property-decorator/lib";
@Options({
  components: {
    DxHtmlEditor,
    DxMediaResizing,
    DxToolbar,
    DxItem,
  },
  props: {
    height: [Function, Number, String],
    dataSource: String,
  },
})
export default class HtmlForm extends Vue {
  dataSource!:string
  markup = this.dataSource; 
  sizeValues = ["8pt", "10pt", "12pt", "14pt", "18pt", "24pt", "36pt"];
  fontValues = [
    "Arial",
    "Courier New",
    "Georgia",
    "Impact",
    "Lucida Console",
    "Tahoma",
    "Times New Roman",
    "Verdana",
  ];
  headerValues = [false, 1, 2, 3, 4, 5];
  isMultiline = true;
}
</script>
<style>
.dx-htmleditor-content img {
  vertical-align: middle;
  padding-right: 10px;
}

.dx-htmleditor-content table {
  width: 50%;
}

.options {
  padding: 20px;
  background-color: rgba(191, 191, 191, 0.15);
  margin-top: 20px;
}

.caption {
  font-size: 18px;
  font-weight: 500;
}

.option {
  margin-top: 10px;
}
</style>